<script setup>
import { useUserStore, usePaintingStore } from "@/store";
import { getDetailType_Account } from "@/api/home";
import { computed, onMounted, ref, watch } from "vue";
import { getIsIos } from "@/utils/host";
import Toast from "@vant/weapp/dist/toast/toast";

const props = defineProps({
  id: Number,
  imgInfo: Object,
});

const emit = defineEmits(["click"]);

const userStore = useUserStore();
const paintingStore = usePaintingStore();

const max = ref("");
const min = ref("");
const isIos = ref(false);
const expireVipModal = ref(false);
const isLoading = ref(true);
watch(() => expireVipModal.value, (val) => {
  paintingStore.isBuyModal = val;
  if (!val) {
    isLoading.value = true;
  }
})
// 判断是否是IOS
getIsIos({
  fn: (res) => {
    isIos.value = res;
  },
});

const expendNum = computed(() => {
  if (props.id) {
    // 是否是高清修复
    if (props.id === 44) {
      if (!Object.keys(props.imgInfo).length)
        return `${min.value}~${max.value}`;
      const { width, height } = props.imgInfo;
      if (width > 2048 || height > 2048) {
        return max.value;
      } else {
        return min.value;
      }
    } else if (props.id === 38) {
      return min.value * paintingStore.textCreateImageObj.num;
    } else if (props.id === 45) {
      return min.value * paintingStore.generationBgc.num;
    } else if (props.id === 46) {
      return min.value * paintingStore.generationBgcV2.num;
    } else if (props.id === 47) {
      return min.value;
    } else {
      return min.value;
    }
  }
});

const getDetailType_AccountFn = async () => {
  if (!props.id) return;
  const res = await getDetailType_Account(props.id);
  const res2 = res.data.categoryParam
    .find((item) => item.title === "expendNum")
    .data.map((item) => item.title)
    .sort((a, b) => a - b);
  res2[0] && (min.value = res2[0]);
  res2[1] && (max.value = res2[1]);
};

const onClick = async () => {
  console.log('72');
  if (!isLoading.value) return;
  isLoading.value = false;
  await userStore.getUserInfo();
  console.log('75');
  const { genImageNum, rewardImageNum } = userStore.userInfo;
  if (genImageNum + rewardImageNum < expendNum.value) {
    console.log('79');
    if ([38, 41, 43, 44].includes(props.id)) return emit("click", true);
    console.log('81');
    return (expireVipModal.value = true);
  }
  emit("click");
  setTimeout(() => {
    isLoading.value = true;
  }, 2000);
};

onMounted(() => {
  getDetailType_AccountFn();
});
</script>

<template>
  <div class="btnBox" @click="onClick">
    <slot>开始AI生成</slot>
    <div class="btnLabel" slot="label">消耗：{{ expendNum }}算力</div>
  </div>
  <ExpireVipModal v-model:expireVipModal="expireVipModal"></ExpireVipModal>
</template>

<style lang="less" scoped>
.btnBox {
  width: 600rpx;
  height: 86rpx;
  color: var(--a-main-Feature-text-color);
  background-color: var(--a-main-color);
  border-radius: 44rpx;
  text-align: center;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;

  .btnLabel {
    font-size: 20rpx;
  }
}
</style>
